<script setup>
import { ref, onMounted } from 'vue'
import { selDictsApi } from '@/commons/api'
import DeptUser from '@/components/business/DeptUser'
import Areas from '@/components/area/Areas'
import SelFile from '@/components/upload/SelFile.vue'
import Upload from '@/components/upload/Upload.vue'
import SelectMuti from '@/components/select/SelMuti.vue'

// 自动加载，判断权限
onMounted(() => {
  selDicts(2, '')
})

const users = ref([])

const areaList = ref({provId: '', provName: '', provCode: '', cityId: '', cityName: '', cityCode: '', distId: '', distName: '', distCode: '', strtId: '', strtName: '', strtCode: ''})

// setUrl 回调获取上传文件的地址
const imgRef = ref({id: '', name: '', url: '', thumb: ''})
const imgListRef = ref([])
const fileRef = ref({id: '', name: '', url: ''})
const fileListRef = ref([])
const setUrl = (kind, type, file) => {
  switch (kind) {
    case 1:
      imgRef.value = file
      break;
    case 2:
      imgListRef.value = file
      break;
    case 3:
      fileRef.value = file
      break;
    case 4:
      fileListRef.value = file
      break;
  }
}

// setFileUrl 回调获取上传文件的地址
const imgObj = ref({id: '', name: '', url: '', thumb: ''})
const fileObj = ref({id: '', name: '', url: ''})
const fileList = ref([])
const setFileUrl = (kind, type, file) => {
  switch (kind) {
    case 1:
      imgObj.value = file
      break;
    case 2:
      fileObj.value = file
      break;
    case 3:
      fileList.value = file
      break;
  }
}

const dictList = ref([])
const selDicts = async (kind, keywords) => {
  const res = await selDictsApi({kind, typeCode: 'BSI_PROV', keywords: keywords})
  if(res.code === import.meta.env.VITE_SUCCESS_CODE && res.data && res.data.length > 0) {
    dictList.value = res.data
  }
}

const dictIds = ref([])
const dictNames = ref([])
const setVals = (items) => {
  items.forEach(item => {
    dictIds.value.push(item.selId)
    dictNames.value.push(item.selName)
  })
}

const selsByKey = (keywords, kind) => {
  selDicts(keywords, kind)
}
</script>

<template>
  <div class="home-a">
    <div class="home-b">用户选择</div>
    <dept-user :users="users" />
  </div>
  <div class="home-a">
    <div class="home-b">地区选择</div>
    <areas :areaList="areaList" />
  </div>
  <div class="home-a">
    <div class="home-b">单图片上传实例</div>
    <sel-file :kind="1" :types="1" :file="imgRef" @setUrl="setUrl" />
    <div class="home-c">上传的图片有：{{imgRef.url}}</div>
  </div>
  <div class="home-a">
    <div class="home-b">多图片上传实例</div>
    <sel-file :kind="2" :types="1" :files="imgListRef" @setUrl="setUrl" />
    <div class="home-c">上传的图片有：{{imgListRef}}</div>
  </div>
  <div class="home-a">
    <div class="home-b">单文件上传实例</div>
    <sel-file :kind="3" :types="1" :file="fileRef" @setUrl="setUrl" />
    <div class="home-c">上传的文件有：{{fileRef.name}}</div>
  </div>
  <div class="home-a">
    <div class="home-b">多文件上传实例</div>
    <sel-file :kind="4" :types="1" :files="fileListRef" @setUrl="setUrl" />
    <div class="home-c">上传的文件有：{{fileListRef}}</div>
  </div>
  <div class="home-a">
    <div class="home-b">单图片上传实例(不从文件库中选择，不保存至数据库中，不进行登录及权限校验)</div>
    <upload :kind="1" :file="imgObj" @setUrl="setFileUrl" />
    <div class="home-c">上传的图片有：{{imgObj.thumb}}</div>
  </div>
  <div class="home-a">
    <div class="home-b">单文件上传实例(不从文件库中选择，不保存至数据库中，不进行登录及权限校验)</div>
    <upload :kind="2" :file="fileObj" @setUrl="setFileUrl" />
    <div class="home-c">上传的文件有：{{fileObj.name}}</div>
  </div>
  <div class="home-a">
    <div class="home-b">多文件上传实例(不从文件库中选择，不保存至数据库中，不进行登录及权限校验，且图片与文件分开展示)</div>
    <upload :kind="3" :files="fileList" @setUrl="setFileUrl" />
    <div class="home-c">上传的文件有：{{fileList}}</div>
  </div>
  <div class="home-a">
    <select-muti :kind="1" :selList="dictList" :inboxed="1" @setVals="setVals" @selsByKey="selsByKey" />
  </div>
</template>

<style scoped>
.home-a {padding: 10px; background-color: #FFF;}
.home-b {height: 35px; line-height: 35px; padding: 0 20px; margin: 10px 0; font-size: 16px; border-bottom: 1px solid #CCC;}
.home-c {padding: 20px;}
</style>
